// @ts-nocheck
import React, { Fragment, useEffect, useState } from 'react';
import { Card, Divider, Avatar } from 'antd-mobile';
import { CouponList, Popup, Toast, CouponCell } from 'react-vant';
import { data, disabledDiscountCoupon, disabledCoupon } from './demo';
import jwtDecode from 'jwt-decode';
import {
  ExclamationCircleOutline,
  BellOutline,
  SetOutline,
  RightOutline,
} from 'antd-mobile-icons';
import qinZe from './images/qinze.jpg';
import shwj from './images/shwj.jpg';
import dwsj from './images/dwsj.jpg';
import wbsys from './images/wbsys.jpg';
import './index.less';
import 'lib-flexible';
import { history } from 'umi';
import '@/pages/golobo.less';

import './iconfont-1/iconfont.css';
import './iconfont-2/iconfont.css';

export default function IndexMine(props: any) {
  // 服务ICON
  const serviceIcon = [
    { icon: 'icon-dunpai', service: '影票查验' },
    { icon: 'icon-jurassic_users', service: '我的小剧场' },
    { icon: 'icon-taolun', service: '发起的讨论' },
    { icon: 'icon-add', service: '我的收藏' },
    { icon: 'icon-lishijilu', service: '播放记录' },
    { icon: 'icon-card', service: '银行特惠' },
    { icon: 'icon-w_qushi', service: '阿里众筹鱼' },
    { icon: 'icon-yulebao', service: '娱乐宝' },
    { icon: 'icon-aixin', service: '3小时公益' },
    { icon: 'icon-kefu', path: 'customer', service: '我的客服' },
    { icon: 'icon-tiaocha-baogao', service: '满意度调查' },
  ];
  const [coupons, setCoupons] = useState([data, disabledDiscountCoupon]);
  const [disabledCoupons] = useState([disabledCoupon, disabledDiscountCoupon]);
  const [chosenCoupon, setChosenCoupon] = useState(-1);
  const [visible, setVisible] = useState(false);

  const onChange = (index: number) => {
    setVisible(false);
    setChosenCoupon(index);
  };

  const onExchange = (code) => {
    console.log('code: ', code);
    Toast('兑换成功');
    setCoupons((v) => [...v, { ...data, id: getRandomId() } as any]);
  };
  let [user, setuser] = useState({
    username: '',
    img: '',
    attention: [],
    bean: [],
  });
  useEffect(() => {
    let token = localStorage.getItem('token');
    if (token) {
      let user = jwtDecode(token)._doc;
      console.log(user);

      setuser({ ...user });
    }
  }, []);
  const getRandomId = (max = 999999) =>
    String(Math.floor(Math.random() * max) + 1);

  return (
    <div className="mine-box">
      <div className="bg-pink"></div>
      <div className="bg-grey"></div>
      <div className="main">
        <div className="user">
          {/* <img src={user.img} alt="" /> */}
          {user.img ? (
            <Avatar
              src={user.img}
              onClick={() => {
                history.push({
                  pathname: '/userinfo',
                  state: { _id: user._id },
                });
              }}
            />
          ) : (
            <Avatar src="" />
          )}

          <div className="user-info">
            <p>{user.username}</p>
            <p>
              {user.username ? (
                <Fragment>
                  <span>关注 {user.attention.length} </span>
                  <span>粉丝 {user.bean.length} </span>
                </Fragment>
              ) : (
                <Fragment>
                  <span
                    onClick={() => {
                      history.push('/login');
                    }}
                  >
                    登录
                  </span>
                </Fragment>
              )}
            </p>
          </div>
          <div className="user-icon">
            <ExclamationCircleOutline
              color="white"
              style={{ height: 45 }}
              fontSize={18}
            />
            <BellOutline color="white" style={{ height: 45 }} fontSize={18} />
            <SetOutline color="white" style={{ height: 45 }} fontSize={18} />
          </div>
        </div>
        <Card style={{ height: 60 }}>
          <div className="vip">
            <p>会员中心</p>
            <p>观影金 36</p>
          </div>
          <Divider
            direction="vertical"
            style={{ fontSize: 60, top: 0, margin: '4px 0' }}
          />
          <div className="leval">
            <p>加油升级</p>
            <p>
              再积174经验值可升级
              <RightOutline />
            </p>
          </div>
        </Card>
        <Card style={{ height: '2rem', marginTop: 12 }}>
          <div className="vote">
            <div>
              <span className="iconfont icon-dianyingpiao"></span>
              <span>电影票</span>
            </div>
            <div>
              <span className="iconfont icon-leixiaoshipeiliaox"></span>
              <span>小食</span>
            </div>
            <div>
              <span className="iconfont icon-ziyuan"></span>
              <span>演出票</span>
            </div>
          </div>
        </Card>
        <Card title="我的优惠" style={{ height: '3.6rem', marginTop: 12 }}>
          <div className="preferential">
            <div>
              <span className="iconfont icon-youhuiquanyouhuiquandaijinquan"></span>
              <span>
                <CouponCell
                  coupons={coupons}
                  chosenCoupon={chosenCoupon}
                  onClick={() => setVisible(true)}
                />
                <Popup
                  round
                  position="bottom"
                  style={{ height: '90%', paddingTop: 4 }}
                  visible={visible}
                  onClose={() => setVisible(false)}
                >
                  <CouponList
                    chosenCoupon={chosenCoupon}
                    coupons={coupons}
                    disabledCoupons={disabledCoupons}
                    onChange={onChange}
                    onExchange={onExchange}
                  />
                </Popup>
              </span>
              <div>共1张</div>
            </div>
            <div>
              <span className="iconfont icon-quanyika"></span>
              <span>权益卡</span>
              <div>开卡购票更优惠</div>
            </div>
            <div>
              <span className="iconfont icon-qia"></span>
              <span>乐影卡</span>
              <div></div>
            </div>
          </div>
        </Card>
        <Card title="我的记录" style={{ height: '3.3rem', marginTop: 12 }}>
          <div className="record">
            <div className="item">
              <img src={shwj} alt="" />
              <p>
                <span>想看</span>
                <span>共1部</span>
                <span></span>
              </p>
            </div>
            <div className="item">
              <div className="images">
                <img src={dwsj} alt="" />
                <img src={wbsys} alt="" />
              </div>
              <p>
                <span>看过</span>
                <span>共4部</span>
                <span>3部待评价</span>
              </p>
            </div>
          </div>
        </Card>
        <Card title="我的服务" style={{ height: '6rem', marginTop: 12 }}>
          <div className="service">
            {serviceIcon.map((item) => {
              return (
                <div
                  key={item.icon}
                  onClick={() => {
                    history.push({ pathname: '/customer', state: user });
                  }}
                >
                  <span className={`iconfont ${item.icon}`}></span>
                  <span>{item.service}</span>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
    </div>
  );
}
